<template>
  <div id="warp" ref="warp"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from 'three'
const warp = ref()
const width = window.innerWidth
const height = window.innerHeight
const radius = 500 // 球体半径

// 第一步：创建场景
const scene = new THREE.Scene()

// 第二步：绘制一个球体
const geometry = new THREE.SphereGeometry(radius, 32, 32)
const material = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('http://123.60.169.66:9000/yunboo/devops/1.jpg') // 上面的全景图片
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// 第三步：创建相机，并确定相机位置
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100)
camera.position.x = 0  // 确定相机位置
camera.position.y = 0
camera.position.z = 100

camera.target = new THREE.Vector3(radius, 0, 0) // 设定对焦点


// 第四步：拍照并绘制到canvas
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height) // 设置照片大小



function render() {
  camera.lookAt(camera.target)   // 对焦
  renderer.render(scene, camera) // 拍照

  // 不断渲染，因为图片加载和处理需要时间，不确定何时拍照合适
  requestAnimationFrame(render)
}

onMounted(() => {
  warp.value.appendChild(renderer.domElement) // 绘制到canvas
  render()
})
</script>

<style lang="scss" scoped>
#warp{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}
</style>